var relationName = [{
    name: "成龙",
    friend: [
        { name: "房祖名", relationship: "父子" },
        { name: "林凤娇", relationship: "夫妻" },
        { name: "吴绮莉", relationship: "绯闻" },
        { name: "徐静蕾", relationship: "激吻" },
        { name: "徐静d蕾", relationship: "激d吻" }
    ]
}, {
    name: "房祖名",
    friend: [
        { name: "成龙", relationship: "父子" },
        { name: "林凤娇", relationship: "母子" },
        { name: "方大同", relationship: "情敌" },
        { name: "薛凯琪", relationship: "女友" },
        { name: "陈坤", relationship: "朋友" },
        { name: "陈d坤", relationship: "朋友" },
        { name: "陈d坤", relationship: "朋友" },
        { name: "赵薇", relationship: "朋友" }
    ]
}, {
    name: "林凤娇",
    friend: [
        { name: "成龙", relationship: "夫妻" },
        { name: "房祖名", relationship: "母子" },
        { name: "吴绮莉", relationship: "情敌" }
    ]
}, {
    name: "吴绮莉",
    friend: [
        { name: "成龙", relationship: "绯闻" },
        { name: "林凤娇", relationship: "情敌" },
        { name: "吴卓林", relationship: "母女" }
    ]
}, {
    name: "徐静蕾",
    friend: [
        { name: "李亚鹏", relationship: "电影" },
        { name: "韩寒", relationship: "娱乐圈" },
        { name: "成龙", relationship: "激吻" },
        { name: "黄立行", relationship: "电影" }
    ]
}, {
    name: "徐静d蕾",
    friend: [
        { name: "李亚鹏", relationship: "电影" },
        { name: "韩寒", relationship: "娱乐圈" },
        { name: "成龙", relationship: "激吻" },
        { name: "黄立行", relationship: "电影" }
    ]
}, {
    name: "方大同",
    friend: [
        { name: "房祖名", relationship: "情敌" },
        { name: "薛凯琪", relationship: "否认拍拖" },
        { name: "林宥嘉", relationship: "歌手" },
        { name: "韩庚", relationship: "演唱会" }
    ]
}, {
    name: "薛凯琪",
    friend: [
        { name: "方大同", relationship: "否认拍拖" },
        { name: "房祖名", relationship: "女友" }
    ]
}]

var relationNames = [{
    name: "成龙",
    friend: [
        { name: "房祖名", relationship: "父子" },
        { name: "林凤娇", relationship: "夫妻" },

        { name: "吴绮莉", relationship: "绯闻" }
    ]
}, {
    name: "房祖名",
    friend: [
        { name: "成龙", relationship: "父子" },
        { name: "林凤娇", relationship: "母子" },
        { name: "方大同", relationship: "情敌" },
        { name: "薛凯琪", relationship: "女友" },
        { name: "陈坤", relationship: "朋友" },
        { name: "陈d坤", relationship: "朋友" },
        { name: "陈d坤", relationship: "朋友" },
        { name: "赵薇", relationship: "朋友" }
    ]
}, {
    name: "林凤娇",
    friend: [
        { name: "成龙", relationship: "夫妻" },
        { name: "房祖名", relationship: "母子" },
        { name: "吴绮莉", relationship: "情敌" }
    ]
}, {
    name: "吴绮莉",
    friend: [
        { name: "成龙", relationship: "绯闻" },
        { name: "林凤娇", relationship: "情敌" },
        { name: "吴卓林", relationship: "母女" }
    ]
}, {
    name: "徐静蕾",
    friend: [
        { name: "李亚鹏", relationship: "电影" },
        { name: "韩寒", relationship: "娱乐圈" },
        { name: "成龙", relationship: "激吻" },
        { name: "黄立行", relationship: "电影" }
    ]
}, {
    name: "徐静d蕾",
    friend: [
        { name: "李亚鹏", relationship: "电影" },
        { name: "韩寒", relationship: "娱乐圈" },
        { name: "成龙", relationship: "激吻" },
        { name: "黄立行", relationship: "电影" }
    ]
}, {
    name: "方大同",
    friend: [
        { name: "房祖名", relationship: "情敌" },
        { name: "薛凯琪", relationship: "否认拍拖" },
        { name: "林宥嘉", relationship: "歌手" },
        { name: "韩庚", relationship: "演唱会" }
    ]
}, {
    name: "薛凯琪",
    friend: [
        { name: "方大同", relationship: "否认拍拖" },
        { name: "房祖名", relationship: "女友" }
    ]
}]

var relation = {
    radius: 250, //半径
    boxW: 1000,
    boxH: 500,
    hostW: 200,
    hostH: 200,
    guestW: 80,
    guestH: 80,
    relationW: 60,
    relationH: 60,
    angle: 0,
    id: "box",
    init: function(array, n) { //传入参数1：数组 参数2：第几个  
        this.array = array;
        this.appendHost(this.array, n);
        this.appendQuest(this.array, n);
        this.appendRelationShip(this.array, n);
    },
    appendHost: function(array, n) {
        var box = $("#" + this.id);
        var host = "<span class='host'>" + array[n].name + "</span>";
        box.append(host)
        this.postHost();
    },
    postHost: function() {
        var centerX = (this.boxW - this.hostW) / 2;
        var centerY = (this.boxH - this.hostH) / 2;
        $(".host").css({
            left: centerX,
            top: centerY
        })
    },

    appendQuest: function(array, n) {
        var that = this;
        var box = $("#" + this.id);
        var guests = "";
        for (var i = 0; i < array[n].friend.length; i++) {
            guests += "<span class='guest'>" + array[n].friend[i].name + "</span>";
            // guests+= "<p class='line'>"+"</p>";  
            guests += "</span>";
        }
        $(guests).appendTo(box);
        // $(".guest").live("click",function(){  
        //         that.move(that,this);  
        // })  
        this.postQuest();
    },
    postQuest: function() {
        var guests = $("#box .guest");
        var that = this;
        guests.each(function(i) {
            guests.eq(i).css({
                left: that.setQuestPose(guests.length, that.radius, i, that.guestW, that.guestH, that.angle).left,
                top: that.setQuestPose(guests.length, that.radius, i, that.guestW, that.guestH, that.angle).top
            }).attr("angle", i / guests.length)
        })
    },
    setQuestPose: function(n, r, i, w, h, d) { //n代表共几个对象 r代表周长 i代表第几个对象 w代表外面对象的宽带 h代表外面对象的高度 d代表其实角度  
        // var p = (i / n )* Math.PI * 2 + Math.PI * 2 * d; 
        // var p = (i / n )* Math.PI * 2 + Math.PI * 2 * d; 
        // var x = r * Math.cos(p);
        // var y = r * Math.sin(p);
        // return {
        //     "left": parseInt(this.boxW / 2 + x - w / 2),
        //     "top": parseInt(this.boxH / 2 + y - h / 2)
        // }
        var dig = Math.PI * 2 / n; //角度,整个圆分为n份
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        return {
            "left": parseInt(this.boxW / 2 + x * r - w / 2),
            "top": parseInt(this.boxH / 2 + y * r - h / 2)
        }
    },
    appendRelationShip: function(array, n) {
        var box = $("#" + this.id);
        var relation = "";
        for (var i = 0; i < array[n].friend.length; i++) {
            relation += "<span class='relationship'>" + array[n].friend[i].relationship + "</span>";
        }
        box.append(relation);
        this.postRelationShip();
    },
    postRelationShip: function() {
        var guests = $(".relationship");
        var that = this;
        guests.each(function(i) {
            guests.eq(i).css({
                left: that.setQuestPose(guests.length, 150, i, that.relationW, that.relationH, that.angle).left + 30,
                top: that.setQuestPose(guests.length, 150, i, that.relationW, that.relationH, that.angle).top + 10
            })
        })
    }
}


var relations = {
    radius: 100, //半径
    boxW: 1000,
    boxH: 500,
    hostW: 200,
    hostH: 200,
    guestW: 80,
    guestH: 80,
    relationW: 60,
    relationH: 60,
    angle: 0,
    id: "boxx",
    initt: function(array, n) { //传入参数1：数组 参数2：第几个  
        this.array = array;
        // this.appendHostt(this.array, n);
        this.appendQuestt(this.array, n);
        this.appendRelationShipp(this.array, n);
    },
    // appendHostt: function(array, n) {
    //     var box = $("#" + this.id);
    //     var host = "<span class='hostt'>" + array[n].name + "</span>";
    //     box.append(host)
    //     this.postHostt();
    // },
    // postHostt: function() {
    //     var centerX = (this.boxW - this.hostW) / 2;
    //     var centerY = (this.boxH - this.hostH) / 2;
    //     $(".host").css({
    //         left: centerX,
    //         top: centerY
    //     })
    // },

    appendQuestt: function(array, n) {
        var that = this;
        var boxx = $("#" + this.id);
        var guests = "";
        for (var i = 0; i < array[n].friend.length; i++) {
            guests += "<span class='guest'>" + array[n].friend[i].name + "</span>";
            // guests+= "<p class='line'>"+"</p>";  
            guests += "</span>";
        }
        $(guests).appendTo(boxx);
        // $(".guest").live("click",function(){  
        //         that.move(that,this);  
        // })  
        this.postQuestt();
    },
    postQuestt: function() {
        var guests = $("#boxx .guest");
        var that = this;
        guests.each(function(i) {
            guests.eq(i).css({
                left: that.setQuestPosee(guests.length, that.radius, i, that.guestW, that.guestH, that.angle).left,
                top: that.setQuestPosee(guests.length, that.radius, i, that.guestW, that.guestH, that.angle).top
            }).attr("angle", i / guests.length)
        })
    },
    setQuestPosee: function(n, r, i, w, h, d) { //n代表共几个对象 r代表周长 i代表第几个对象 w代表外面对象的宽带 h代表外面对象的高度 d代表其实角度  
        // var p = (i / n )* Math.PI * 2 + Math.PI * 2 * d; 
        // var p = (i / n )* Math.PI * 2 + Math.PI * 2 * d; 
        // var x = r * Math.cos(p);
        // var y = r * Math.sin(p);
        // return {
        //     "left": parseInt(this.boxW / 2 + x - w / 2),
        //     "top": parseInt(this.boxH / 2 + y - h / 2)
        // }
        var dig = Math.PI  / n; //角度,整个圆分为n份
        var x = Math.sin((i) * dig);
        var y = Math.cos((i) * dig);
        return {
            "left": parseInt(this.boxW / 2 + x * r - w / 2),
            "top": parseInt(this.boxH / 2 + y * r - h / 2)
        }
    },
    appendRelationShipp: function(array, n) {
        var box = $("#" + this.id);
        var relation = "";
        for (var i = 0; i < array[n].friend.length; i++) {
            relation += "<span class='relationship'>" + array[n].friend[i].relationship + "</span>";
        }
        box.append(relations);
        this.postRelationShipp();
    },
    postRelationShipp: function() {
        var guests = $(".relationshipp");
        var that = this;
        guests.each(function(i) {
            guests.eq(i).css({
                left: that.setQuestPosee(guests.length, 150, i, that.relationW, that.relationH, that.angle).left + 30,
                top: that.setQuestPosee(guests.length, 150, i, that.relationW, that.relationH, that.angle).top + 10
            })
        })
    }
}

$(document).ready(function() {
    relation.init(relationName, 0);
    relations.initt(relationNames, 0);
})
